<template>
  <div class="dialogTest">
    <ocn-myDialog
      :title="title"
      :dialogVisible.sync="dialogVisible"
      :contentOption="myDialog"
      :btnGroup="btnGroup"
      @dialogOption="dialogOption"
    ></ocn-myDialog>

    <el-button type="primary" @click="openDialog('text')"
      >显示text类型dialog</el-button
    >
    <el-button type="primary" @click="openDialog('form')"
      >显示form类型dialog</el-button
    >
    <el-button type="primary" @click="openDialog('transfer')"
      >显示transfer类型dialog</el-button
    >
  </div>
</template>
<script>
import formConfig from "./formConfig";

export default {
  name: "dialogTest",
  data() {
    return {
      title: "",

      dialogVisible: false,

      myDialog: {},

      /**
       * @author QL
       * @param { Object }  myDialog_text
       * @date 2022-01-24 13:38:37
       * @description text常规类型的弹出框配置对象
       */
      myDialog_text: {
        type: "text",
        text: "测试text类型dialog",
      },

      /**
       * @author QL
       * @param { Object } myDialog_transfer
       * @date 2022-01-24 13:37:28
       * @description transfer 类型的弹窗配置对象
       */
      myDialog_transfer: {
        type: "transfer",
        transfer: {
          title: ["左侧测试", "右侧测试"],
          button_texts: ["撤回", "选取"],
          transDatas: [
            {
              key: "0",
              label: "测试0",
              disabled: false,
            },
            {
              key: "1",
              label: "测试1",
              disabled: false,
            },
            {
              key: "2",
              label: "测试2",
              disabled: false,
            },
          ],
          alias: {
            key: "key",
            label: "label",
          },
          search: {
            showSearch: true,
            searchKey: "label",
            placeholder: "请输入关键词",
          },
        },
      },

      /**
       * @author QL
       * @param { Object } myDialog_form 
       * @param { Object } formBtn 
       * @date 2022-01-24 13:37:59
       * @description form类型的弹窗配置对象
       */
      myDialog_form: {
        type: "form",
        form: formConfig.formTest,
      },

      formBtn: [
        {
          eventType: "submit",
          btnType: "primary",
          text: "提交",
        },
      ],

      btnGroup: undefined,
    };
  },
  created() {},
  mounted() {},
  methods: {
    openDialog(type) {
      this.myDialog = {
        ...this[`myDialog_${type}`],
      };
      switch (type) {
        case "text":
          this.title = "text类型dialog";
          this.btnGroup = undefined;
          break;
        case "form":
          this.title = "form类型dialog";
          this.btnGroup = [].concat(this.formBtn);
          break;
        case "transfer":
          this.title = "transfer类型dialog";
          this.btnGroup = undefined;
          break;
        default:
          break;
      }

      this.dialogVisible = true;
    },

    dialogOption(val){
      console.log("dialog option:", val);
    },
  },
};
</script>
<style lang="scss" scoped>
.dialogTest {
  background-color: #ffffff;
  height: 100%;
  /* stretch 属性标识按照对称轴垂直方向沾满容器 前提是容器没有设置对称轴垂直方向的具体距离属性 width/height*/
  align-self: stretch;
  padding: 1%;
  margin: 2px;
  border-radius: 6px;
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  justify-content: flex-start;
  align-items: flex-start;
}
</style>